<template>
  <div class="container">
    <el-popover
      placement="bottom-end"
      width="100"
      trigger="click"
      effect="dark"
    >
      <el-button
        slot="reference"
        :style="{
          position: 'fixed',
          zIndex: '9999',
          right: '12px',
          top: '12px',
        }"
        icon="el-icon-brush"
        type="primary"
        size="mini"
        circle
      ></el-button>
      <div>
        <el-button
          type="text"
          size="mini"
          @click="setBackground"
          style="width:100%;margin:0"
          ><i class="el-icon-refresh"></i>&nbsp;换个背景</el-button
        >
        <el-button
          type="text"
          size="mini"
          @click="clearBackground"
          style="width:100%;margin:0"
          ><i class="el-icon-delete"></i>&nbsp;删除背景</el-button
        >
      </div>
    </el-popover>

    <router-view></router-view>
  </div>
</template>

<script scoped>
export default {
  name: "container",
  props: {},
  components: {},
  computed: {},
  data() {
    return {
      screenWidth: document.body.clientWidth,
      maxContainerWidth: 540,
      maxModelWidth: 480,
    };
  },
  methods: {
    setContainerWidth() {
      let containerWidth = this.maxContainerWidth;
      if (this.screenWidth < containerWidth) containerWidth = this.screenWidth;
      containerWidth += "px";
      console.log("containerWidth", containerWidth);
      // console.log("this.screenWidth", this.screenWidth);
      this.$store.commit("setContainerWidth", containerWidth);
    },
    setModelWidth() {
      let modelWidth = this.maxModelWidth;
      if (this.screenWidth * 0.9 <= modelWidth) modelWidth = this.screenWidth;
      modelWidth += "px";
      console.log("modelWidth", modelWidth);
      // console.log("this.screenWidth", this.screenWidth);
      this.$store.commit("setModelWidth", modelWidth);
    },
    setBackground() {
      // random background index
      let className = "bg" + this.myRandom(0, 70);
      document.getElementsByTagName("body")[0].className =
        className + " body-bg";
    },
    clearBackground() {
      document.getElementsByTagName("body")[0].className = "bg0 body-bg";
    },
    myRandom(start, end) {
      const array = new Uint32Array(1),
        maxUint = 0xffffffff; //maxUint为最大的可能值
      const randomNum = crypto.getRandomValues(array)[0] / maxUint;
      return Math.floor((end - start + 1) * randomNum + start);
    },
  },
  mounted() {
    const that = this;
    window.onresize = () => {
      return (() => {
        window.screenWidth = document.body.clientWidth;
        that.screenWidth = window.screenWidth;
      })();
    };
    this.setContainerWidth();
    this.setModelWidth();
    // background set
    this.setBackground();
  },
  created() {},
  watch: {
    /* 监听*/
    screenWidth(val) {
      this.screenWidth = val;
      this.setModelWidth();
      this.setContainerWidth();
    },
  },
};
</script>

<style>
@import "background.css";

* {
  box-sizing: border-box;
}

/* ::-webkit-scrollbar {
    width: 0;
  } */

body {
  /* backdrop-filter: blur(2px); */
  /* backdrop-filter: opacity(10%); */
  /* backdrop-filter: brightness(60%); */
  /* position: fixed; */
  /* top: 0; */
  /* left: 0; */
  /* right: 0; */
  /* bottom: 0; */
  margin: 0;
  padding: 0;
  /* height: 100vh; */
  /* width: 100vw; */
  display: flex;
  /* text-align: center; */
  justify-content: center;
  /* 水平居中 */
  align-items: center;
  /* 垂直居中 */
  /* border: red 1px solid; */
  overflow-y: auto;
  background-color: #fafafa;
}

.container {
  margin: 0;
  padding: 0;
}
</style>
